<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas{
				display: block;
				margin: 0 auto;
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="../libs/utils.js"></script>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d');
			
			
			var w = canvas.width = 500;
			var h = canvas.height = 300
			
			// 获取鼠标到canvas的距离
			var mouse = $C.getOffset(canvas)
			// 监听鼠标移动，先清除画布，再绘制坐标系，线条，夹角值
			canvas.addEventListener('mousemove',function(){
				// 清空画布
				ctx.clearRect(0,0,w,h)
				// 绘制坐标系
				drawSystem()
				// 绘制线
				drawLine()
				// 绘制atan的夹角文字
				drawText()
				// 绘制atan2的夹角文字
				drawText2()
			})
			
			// 绘制坐标系
			function drawSystem(){
				ctx.save()
					ctx.beginPath()
					ctx.lineWidth = 1.5
					ctx.strokeStyle='red'
					ctx.moveTo(0,h/2)
					ctx.lineTo(w,h/2)
					ctx.moveTo(w/2,0)
					ctx.lineTo(w/2,h)
					ctx.stroke()
				ctx.restore()
			}
			// 绘制夹角线
			function drawLine(){
				ctx.save()
					ctx.strokeStyle='#007AFF';
					ctx.beginPath()
					// 鼠标的位置
					ctx.moveTo(mouse.x,mouse.y)
					// 移动到原点
					ctx.lineTo(w/2,h/2)
					ctx.stroke()
				ctx.restore()
			}
			// 绘制atan夹角文字
			function drawText(){
				ctx.save()
				var dx = mouse.x-w/2
				var dy = mouse.y-h/2
				var text = Math.atan(dy/dx)*180 / Math.PI
				ctx.font='16px Arail'
				ctx.fillText(text,mouse.x,mouse.y)
				ctx.restore()
			}
			// 绘制atan2夹角文字
			function drawText2(){
				ctx.save()
				var dx = mouse.x-w/2
				var dy = mouse.y-h/2
				ctx.fillStyle='red'
				var text = Math.atan2(dy,dx)*180 / Math.PI
				ctx.font='16px Arail'
				ctx.fillText(text,mouse.x,mouse.y-20)
				ctx.restore()
			}
		</script>
	</body>
</html>
